<template>
  <a-drawer :width="688" :visible="visible" class="role-add-wrap" @ok="handleSubmit" @cancel="handleCancel">
    <template #header>
      <div class="closed" @click="handleClosed"><icon-close /></div>
      <span class="title">权限编辑</span>
    </template>
    <a-tabs :default-active-key="activeKey">
      <a-tab-pane key="菜单管理" title="菜单管理">
        <div class="flex-rows">
          <span class="labelWrap">角色名称</span>
          <a-input v-model="props.roleName" disabled />
        </div>
        <div class="flex-rows-menu">
          <div class="titleText">选择菜单</div>
          <div class="menuWrap">
            <div class="menuContent">
              <a-tree
              ref="menuTreeRef"
              :data="menuTreeData"
              :checkable="true"
              :checked-keys="checkedMenuKeys"
              :fieldNames="menuNames"
              @check="(menuCheck as any)"
            />
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="数据权限" title="数据权限">
        <div class="flex-rows">
          <span class="labelWrap">角色名称</span>
          <a-input v-model="props.roleName" disabled />
        </div>
        <div class="flex-rows-menu">
          <div class="titleText">选择数据</div>
          <div class="menuWrap">
            <div class="menuContent">
              <a-tree
              ref="menuTreeRef"
              :data="orgTreeData"
              :checkable="true"
              :checked-keys="checkedOrgKeys"
              :fieldNames="fieldNames"
              @check="(orgCheck as any)"
            />
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { menuItem, orgItem } from './roleManagement_type';
import { menu_list, org_list, menu_detail, org_detail, role_menu_add, role_org_add } from '@/api/roleManagement/roleManagement'
const emit = defineEmits(['onClose']);
const props = defineProps({
  id: Number,
  roleName: String
});
const options = ['菜单管理', '数据权限'];
const activeKey = ref('菜单管理');
const visible = ref(true);
const menuNames = {
  key: 'menu_code',
  title: 'menu_name',
  children: 'children'
}
const fieldNames = {
  key: 'code',
  title: 'org_name',
  children: 'children'
}
const checkedMenuKeys = ref([])
const checkedOrgKeys = ref([])

const menuTreeData = ref<menuItem>([]);
const orgTreeData = ref<orgItem>([]);
/**
 * 初始化获取数据
 *  */ 
 const initDraw = async() => {
  console.log(props.id)
    const resOrgTree = await org_list();    
    orgTreeData.value = [(resOrgTree.data as never)];
    const resMenuTree = await menu_list();
    menuTreeData.value = [(resMenuTree.data as never)];
    if(props.id !== -1){
        // 获取已勾选数据
        const resOrg = await org_detail({role_id: props.id});
        if(resOrg.data?.length > 0){
            resOrg.data.forEach((v:any) => {
              checkedOrgKeys.value.push(v.org_code)
            });
        }
        const resMenu = await menu_detail({role_id: props.id});
        if(resMenu.data?.length > 0){
            resMenu.data.forEach((v:any) => {
              checkedMenuKeys.value.push(v.menu_code);
            });
        }
    }
}
/**
 * 
 * @param 菜单树选择
 */
 const menuCheck = (checked: number[]) => {
  console.log(checked)
  checkedMenuKeys.value = [...checked]
};
/**
 * 
 * @param 组织树选择
 */
 const orgCheck = (checked: number[]) => {
  console.log(checked)
  checkedOrgKeys.value = [...checked]
}
/**
 * 提交
 */
const handleSubmit = async() => {
    await role_org_add({ org_code: checkedOrgKeys.value, role_id: props.id });
    await role_menu_add({ menu_code: checkedMenuKeys.value, role_id: props.id });
    emit('onClose', false);
};
/**
 * 取消
 */
const handleCancel = () => {
  handleClosed();
};
const handleClosed = () => {
  emit('onClose', false);
};
onMounted(() => {
  initDraw()
})
</script>
<style lang="less">
.role-add-wrap {
  .arco-drawer {
    height: calc(100vh - 16px);
    margin: 8px 8px 8px 0;
    border-radius: 8px;
    .closed {
      .arco-icon {
        color: #A3B0CC;
      }
    }
    .arco-drawer-body {
      padding-right: 36px;
    }
    .arco-drawer-footer {
      border-top: 0!important;
    }
  }
}
</style>
<style lang="less" scoped>
:deep(.arco-scrollbar)  {
  flex: 1;
  border: 1px solid #d3dbeb;
  border-radius: 4px;
  padding: 24px;
}
:deep(.arco-tree) {
  height: 100%;
  overflow-y: auto;
}
.flex-rows {
  display: flex;
  align-items: center;
  padding-right: 25px;
}
.flex-rows-menu {
  display: flex;
  margin-top: 20px;
  .menuWrap {
    width: 510px;
    height: 408px;
    border: 1px solid #D3DBEB;
    border-radius: 4px;
    overflow: hidden;
    .menuContent {
      height: 100%;
      overflow-y: scroll;
    }
  }
}
.labelWrap {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #465a80;
  padding-bottom: 8px;
  width: 120px;
}

.labelWrap::before {
  content: '* ';
  color: red;
}
.titleText {
  width: 100px;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #465a80;
  padding-left: 10px;
}
.closed {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: #394D73;
  margin-left: 12px;
}
:deep(.arco-form-item-label) {
  font-weight: 400;
  color: #465A80;
}
</style>
